html, body {
    margin:0px;
    height:100%;
  }

h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6vh;
}

h2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7vh;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: block;
    line-height: 1em;
    max-height: 2em;
}

p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 4vh;
}

a {

}

.one {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url(../img/8z8afzcjs3g01.jpg);
    color:white;
}

.two {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url(../img/spbotweb.png);
    color:white;
}

.three {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url(../img/recnetapp.png);
    color:white;
}

.four {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url(../img/comsubsurfacestudioscompensationvr-20220104-200854.jpeg);
    color:white;
}


.item {
    margin:0px;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size:cover;
    background-position: 50%;
}

footer {
    color:white;
    margin:0px;
    height: 20vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#2c2f33;
    background-size:cover;
    background-position: 50%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size:2vh;
    padding-top:5vh;
    padding-bottom:5vh;
}

td {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
}

.discord {
    background-color:#7289da;
}

.play {
    background-color:#f26e47;
}

.git {
    background-color:#333;
}

.dart {
    background-color:#12b9fd;
}

.flutter {
    background-color:#0175c2;
}

.js {
    background-color: #d7bf0e;
}

.js:hover {
    background-color: #b79f00;
}

.dart:hover {
    background-color:#0175c2;
}

.flutter:hover {
    background-color:#02569b;
}

.discord:hover {
    background-color:#5269ba;
}

.play:hover {
    background-color:#d24e27;
}

.git:hover {
    background-color:#151515;
}

button,.buttonarea {
    font-size: 1.5rem;
    border: none;
    padding: 1rem;
    margin: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: rgb(23, 23, 26);
    color:white;
    overflow-x:auto;
}

button:hover {
    background-color: rgb(75, 75, 85);
    border-color: rgb(75, 75, 85);
}


@media screen and (orientation:portrait) {

    h1 {
        font-family: 'JetBrains Mono', monospace;
        font-size: 8vw;
    }
    
    h2 {
        font-family: 'JetBrains Mono', monospace;
        font-size: 8vw;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: block;
        line-height: 1em;
        max-height: 2em;
    }

    p {
        
        font-size: 6vw;
    }

    button,.buttonarea {
        font-size: 1rem;
        line-height: 1;
    }
    
    }