@import url("https://use.typekit.net/alb4vir.css");
@import url("https://use.typekit.net/alb4vir.css");

body{
    background-color: #edcdcd;
}
.CarolineWebb{
    text-align: center;
    padding: .5em;
    font-size: 25px;
    font-family: "modesto-condensed", serif;
    font-weight: 400;
    font-style: normal;
    padding: 4%;
    justify-content: center;
}

h1{
    color: white;
    background-color: #e78eaa;
    padding: 3%;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 0%;
}


/* Column1 */
.flex {
    display: flex;
}

.column1 {
    flex: 50%;
    text-align: center;
    margin-left: 5%;
    width: 3rem;
    margin: 5%;
}

h2{
    color: white;
    background-color: #e78eaa;
    padding: 3%;
    margin-top: 10%;
    margin-left: 25%;
    margin-right: 20%;
    margin-bottom: 5%;
    padding: 10%;
}

.bottom{
    font-family: halcom, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: justify;
    margin-right: 20%;
    font-size: larger;
    width: 400px;
    margin-left: 20%;
    margin-top: 2%;
    color: hsl(349, 48%, 69%);
}

h3{
    color: white;
    background-color: #e78eaa;
    padding: 3%;
    margin-top: 30%;
    margin-left: 0%;
    margin-right: 10%;
    margin-bottom: 5%;
    padding: 10%;
}

/* Colmn 2 */
@keyframes loop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
}

#continuous{
    background-color: #edcdcd;
    padding: 5% 0;
}

#container {
    width: 100%;
    display: flex;
    font-family: Montserrat;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    color: #edcdcd;
    margin-bottom: 2%;
    padding: 5% 0;
}

#container .scroll {
    background: #edcdcd;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: fit-content;
    white-space: nowrap;
    animation: loop 10s linear infinite;
}

.column2 {
    flex: 60%;
    margin-left: 5%;
    margin-bottom: 0%;
    margin-top: 5%;
    text-align: left;
    width: 50%;
}

.fade {
    width: 100%;
    position: absolute;
    background: linear-gradient(
        90deg,
        #edcdcd,
        transparent 30%,
        transparent 100%,
        #edcdcd
    );
    inset: 0;  
}

/* my work */
.parent {
    display: flex;
    margin: 0 10%;
}

body{
    margin: 0;
}

.child {
    flex: 50%;
    justify-content: center;
    align-items: center;
    padding: 2%;
}


/* Button */

button{
    background-color: #e78eaa;
    color: white;
    font-size: 3em;
    border: solid;
    border-color: #edcdcd;
    padding-top: 100%;
    padding-bottom: 100%;
    padding-right: 70%;
    padding-left: 10%;
    margin: 5%;
    text-align: center;
    font-family: "modesto-condensed", serif;
    font-weight: 400;
    font-style: normal;
}

button:active {
    background-color: white;
    color: #e78eaa;
}