/* Import the font */
@font-face {
    font-family: saira;
    src: url("./font/Saira-VariableFont_wdth,wght.ttf");
}

#home h1 {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 300;
    line-height: 1em;
}

#home .hi {
    margin-top: 20vh;
    display: inline-block;
}

#home .im {
    margin-bottom: 20vh;
}

@media screen and (max-width: 600px) {
    .home h1 {
        font-size: 30px;
    }

    #home .square{
        width: 150px;
        height: 150px;
    }   
}
@media screen and (min-width: 601px) {
    .home h1 {
        font-size: 50px;
    }

    #home .square {
        width: 250px;
        height: 250px;
    }
}

.home .hi h1 {
    color: var(--text-color-brown);
    padding-right: 30vw;
}

.home .im h1 {
    color: var(--dark-green);
    padding-left: 30vw;
}

/* Place the square */
.hi {
    
}

 #home .square {
    position: relative;
    
    bottom: 150px;
    
    transform: rotate(-70deg);
    border: solid 30px rgba(101, 155, 94, 0.50);
    animation: rotating 10s linear infinite;
 }


@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}