@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap');

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "Martian Mono", monospace;
    box-sizing: border-box;
}

body {
    background-color: #121212;
    display: flex;
    flex-direction: column;
    margin: 7% 30% 5% 30%;
    font-size: large;
    font-weight: 400;
}

iframe {
    box-sizing: border-box;
    border: solid;
    border-width: 2px;
    border-radius: 15px;
    border-color: #202020;
}

hr {
    margin-top: 4%;
    border-color: #202020a2;
}

.link a.link-btn {
    background: #202020;
    color: #fff;
    border-radius: 12px;
    font-size: 1.5rem;
    padding: 2.4% 4%;
    width: 100%;
    display: block;
    text-align: left;
    border: none;
    margin-top: 4%;
    transition: background 0s, color 0.0s, transform 0.7s;
}

.link a.link-btn:hover {
    color: #121212;
    transform: translateX(20px);
}

.footer {
    text-align: center;
}

.footer.rights {
    margin: 20% 3% 1% 3%;
    font-size: x-small;
    color: #ffffff1e;
}

body, iframe, .link a.link-btn, html {
    cursor: none !important;
}

/* Responsivity */
@media (max-width: 1700px) {
    body {margin: 5% 20% 1% 20%;}
}

@media (max-width: 1300px) {
    body {margin: 10% 10% 1% 10%;}
}

@media (max-width: 1000px) {
    body {margin: 10% 3% 1% 3%;}
    a.link-btn {padding: 10% 5%;}
}

@media (max-width: 700px) {
    .link a.link-btn {border-radius: 6px;}
    #about {border-radius: 6px;}
    iframe {border-radius: 0; border-width: 0; height: 463px;}
}

@media (max-width: 480px) {
    html, body {overflow-x: hidden;}
    body {margin: 10% 3% 1% 3%;}
    .link a.link-btn {font-size: 1.3rem;}
    .footer.rights {font-size: xx-small;}
}