@font-face {
    font-family: "Arimo";
    src: local("ArimoNerdFont-Regular"), url("./ArimoNerdFont-Regular.woff2");
}
html {
    background-color: rgb(46, 52, 64);
    color: rgb(190, 210, 210);
    font-family: "Arimo";
}
body { margin: 0 0; }
header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 200px;
    top: 30vh;
    transition: top 0.8s ease;
    img { height: 200px; cursor: pointer; }
    icon {
        cursor: pointer;
        font-size: 80px;
        margin: 0 20px;
        border-radius: 40px;
        padding: 8px;
    }
    icon:hover { color: rgb(143, 188, 187); background-color: rgba(80, 102, 112, 0.4); }
}
header.top { top: 0px; }
textbox {
    display: block;
    margin: 20px 10vw;
    box-shadow: 0 0 20px 8px rgb(143, 188, 187);
    border-radius: 20px;
    padding: 20px;
    background-color: rgb(59, 66, 82);
    opacity: 0;
    transition: opacity 0.5s ease;
    h3, h2, h1 { text-align: center; }
    h2 { text-decoration: underline; }
    h3 { font-weight: bold; font-size: 16px; }
    hr {
        border: rgb(143, 188, 187) solid 1px;
        margin: 20px 10%;
    }
    div { margin: 8px 0; width: 100%; }
    imgbox {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        flex-wrap: nowrap;
    }
    blockquote {
        margin: 24px 40px;
        padding: 20px;
        border: #00000022 solid 4px;
        border-radius: 20px;
    }
}
textbox.show { opacity: 1; }

@media (min-width: 2000px) { textbox { margin: 20px 20vw; } }
@media (max-width: 1000px) { textbox { margin: 40px 5vw; } header { margin: 20px 0; } }
@media (max-width: 700px) {
    textbox { margin: 0 5vw; }
    header {
        height:25vw;
        img { height: 25vw; }
        icon {
            margin: 0 2.5vw;
            padding: 0;
            font-size: 10vw;
        }
    }
    h1{
        /*white-space:nowrap;*/
        font-size:clamp(14px, 2em, 7vw)
      }
    
}