* {
    box-sizing:border-box;
}


img{
    max-width:100%;
}
body{
    font-family: "Public sans", sans-serif;    
    font-weight: 400;
    font-style: normal;
    background:rgb(236, 249, 255);
    padding-bottom:100px;
}

h1 {
    text-align:center;
    padding-top: 10px;
    justify-content:center;
    font-size:50px;
}

h2 {
    text-align:center;
}

.button-container {
    display:flex;
    font-family: "Public sans", sans-serif;
}

.texts {
    display:flex;
    width:1300px;
    height:100vh;
    text-align:center;
    margin:auto;
}

p {
    font-size:25px;
    font-weight:650;
    height:100vh;
    line-height:1.5;
}

.rainbow {
    color: #7ca9fe;
    animation: rainbow 7s infinite linear;
}

@keyframes rainbow {
    0% {
        filter:hue-rotate(0deg);
    }
    100% {
        filter:hue-rotate(360deg);
    }
}

.word {
    cursor:pointer;
    display:inline-block;
    margin-right: 3px;
}

.word.clicked {
    color:rgb(236, 249, 255);
    opacity:0;
}

.newtext-btn {
    position:absolute;
    top: 20px;
    right:150px;
    background:none;
    border:solid 1.5px #7ca9fe;
    border-radius:7px;
    width:80px;
    height:30px;
    font-weight:600;
    align-items:center;
    font-size:15px;
}

.reset-btn {
    position:absolute;
    top: 20px;
    right:70px;
    background:none;
    border:solid 1.5px #7ca9fe;
    border-radius:7px;
    width:60px;
    height:30px;
    font-weight:600;
    align-items:center;
    font-size:15px;
}

.about {
    font-size:50px;
    font-family:"Public sans", sans-serif;
    color:#7ca9fe;
    border:1px solid;
    padding:10px;
    text-align:center;
    position:absolute;
    top: 20px;
    left:30px;
}

.sourcelink {
    text-align:center;
    color:#7ca9fe;
    display:flex;
    justify-content: center;
    padding-top:30px;
}