h1, h2, p, ul{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: rgb(48, 74, 64);
}

/* body{  
    display: flex;
    justify-content: center;
    background: repeating-linear-gradient(150deg, #f1bd7c, #f3addc);
    min-height: 100vh;
}   */

.TheBody{
    background: repeating-linear-gradient(150deg, #f1bd7c, #f3addc);
    min-height: 100vh; 
}

.header{
    display: flex;
    background-color: #2b2b2b;
    flex-direction: row;
    margin-top: -9px;
    margin-left: -9px;
    margin-right: -9px; 
    padding-top: 5px;
    padding-bottom: 3px;
}

#top_pfp{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-left: 15px;
    margin: 10px;
    display: flex;
    justify-content: flex-end;
}

.heading{
  margin-left: 6px;
  margin-bottom: 10px;
  margin-top: 5px;  
  color: rgb(198, 235, 208);
}

#headerAtag{
    color: rgb(198, 235, 208);
    background-color: #56c056;
    margin-left: 50px;
}

.flex{
    display: flex;
    flex-direction: column;
}

.meBubble{
    position: relative;
    display: flex;
    cursor: pointer;

    background-color: rgb(52, 59, 52);
    border-radius: 50px;
    width: 80px;   
    transition: width 2s;
}

.around{
    display: flex;
    justify-content: center;
    margin-right: 400px;
    margin-bottom: 20px;
}

.meBubble:hover{
    width: 300px;
    transition-duration: 1500ms;
}

.meBubble:hover #InformationText {
    color: rgb(255, 255, 255); /* make the text visible when .meBubble is hovered over */
    font-size: 20px;
    width: 300px;
    transition-duration: 3s;
    padding-left: 95px;
}
#InformationText:hover{
    transition-duration: 1500ms;
}

#InformationText{
    position:absolute;
    color: transparent; 
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    padding-left: 80px;
    padding-top: 10px;
    transition-delay: 120ms;
}

#PFP{
    display: flex; 
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50px;
    transition: width 2s;
    transition-timing-function: ease-in-out; 
    position: relative;
}


.hi{
    display: flex;
    justify-content: center;
    font-size: 77px;
}

.midte{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.axo{
    height: 250px; width: 190px;
    background-color: #edcbee;
    display: flex;
}

@media (max-width: 390px) {
    .midte{
        flex-direction: column;
    }
}

.swing{
    animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        float: left;
        box-shadow: 5px 5px 3px;
}

.swing{
    border: 10px solid #737973;
}

.swing:after{
    content: '';
    position: absolute;
    width: 20px; height: 20px;  
    border: 1px solid rgb(73, 67, 66);
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

/* nail */

.swing:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #050505;
}

@keyframes swing{
    0% {transform: rotate(3deg);}
    100% {transform: rotate(-3deg);}
}

.btnlist{
    border: 4px solid;
    color: rgb(44, 70, 62);
    border-radius: 15px;
    padding: 6px;
    padding-bottom: 20px;
    width: 670px;
    margin: auto;
}

#worklist{
    display: flex;
    justify-content: center;
}

.btns{
    margin: 20px;
}

.TheButtons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* VALENTINES STED SKAL FIKSES HER!! */
.btns:link, .btns:visited{
    color: rgb(150, 192, 163);
    text-decoration: none;
    background-color: rgb(24, 59, 51);
    border-radius: 15px;
    padding: 10px;
    margin: 3px;
}

.btns:hover, .btns:active{
    color: rgb(231, 160, 160);
    text-decoration: dashed;
}

.softpink{
    list-style: none;
}

.softpink li::before{
    content: "\2022";
    color: rgb(161, 107, 139);
    font-weight: bold;
    display: inline-block;
    width: 1em;
}

/* Hello text */
.center{
    transform:prespective(1000px) translate(-50%,-50%);
    transform:skewY(15deg);
    transition:0.5s;
}

.center:hover{
    transform:prespective(1000px) translate(-50%,-50%);
    transform:skewY(0deg);
  }

  .center:active{
    transform:prespective(1000px) translate(-50%,-50%);
    transform:skewY(0deg); 
  }

  .toolbar{
    background-color: aliceblue;
    height: 10%;
    display: block;
  }

/* Width and lengths for phones */
@media (max-width: 1200px) {
    .body{
        padding: 20px;
    }

    .meBubble{
        margin-left: 0px;
    }

    .btnlist{ 
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-width: fit-content;
    }

    .btns{
        margin: 10px;
        min-width: 50px;
        flex-direction: column;
    }

    #worklist{
        display: flex;
        justify-content: center;
        width: 100%;
    } 
}

@media (max-width: 530px) {
    .btnlist{ 
        display: flex;
        flex-direction: column;
        max-width: fit-content;
    }
}