* {
    width: 100%;
    margin: 0;
}

.nav {
    background-color: #4e434a;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right {
    margin: 20px;
}

.left, .right {
    display: flex;
    align-items: center;
    justify-content: space-between;
}    

ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 8px;
}

a {
    /* this removes the line under our links */
    text-decoration: none;
    color: whitesmoke;
}

.image-log {
    border-radius: 45%;
    width: 20%;
    padding: 6px 20px;
}

.bun {
    color: whitesmoke;
}
.header-one {
    margin: 2px;
}
.header-two {
    width: 90%;
    height: 98%;
    border: 10px solid transparent;
    border-image-source: url(./border.png);
    border-image-repeat: stretch;
    border-image-slice: 16;
}

.text {
    --w:450px;
    --c:(100vw - var(--w));

    max-width: 650px;
    background:#fff;
    margin:5px auto;
    border-radius:10px;
    overflow:hidden;
    padding:0 10px 0 clamp(20px,var(--c)*1000,180px);
    box-sizing:border-box;
    box-shadow:1px 2px 5px #0005;
    position:relative;
}

.text .bun-image {
    position:absolute;
    top:clamp(0px,var(--c)*-1000,10px);
    left:clamp(0px,var(--c)*-1000,20px);
    width:clamp(50px,var(--c)*1000,150px);
    height:clamp(50px,var(--c)*1000,100%);
    border-radius:clamp(0px,var(--c)*-1000,50px);
    
    object-position:top;
}

.text .title {
    margin:45px 0 15px clamp(0px,var(--c)*-1000,70px);
}

button {
    width: 140px;
    height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: rgb(243, 243, 243);
    background-color: rgb(109, 90, 90);
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    margin-left: 50px;
}

button:hover {
    background-color: #2EE59D;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
}

.art {
    margin: 0px;
    width: 98%;
    background-color: rgb(199, 141, 141);
}

.art-title {
    padding: 10px;
    font-size: 35px;
}

.container-item {
    font-size: 18px;
    margin-left: 2px;
    padding: 15px;
    text-align: justify;
    text-justify: inter-word;
    
}

h3 span {
    margin-top: 12px;
}

.art-container {
    /* first breakpoint*/
    --w1:800px;
    --n:5;
    /* second breakpoint*/
    --w2:400px;
    --m:2;

    display: grid;
    grid-template-columns:
    repeat(auto-fill,
    minmax(clamp(clamp(
    100%/(var(--n) + 1) + 0.1%, 
    (var(--w1) - 100vw)*1000,
    100%/(var(--m) + 1) + 0.1%), 
    (var(--w2) - 100vw)*1000,
    100%), 1fr));
    gap:80px;
    margin: 10px;
    background-color: rgb(199, 141, 141);
}

.art-container > .container-item {
    height:700px;    
}

.div-quote {
    width: 100%;
    padding: 15px; 
    background-color: aquamarine;
}

.quote {
    margin: 0px;
    padding: 3px;
    font-size: 20px;
}

.quote-section[contenteditable]{
    width:150px;
    border:1px solid;
    font-size:25px;
    line-height:1.2em;
    background:
        linear-gradient(red,red)       0 0/1px max(0px,100% - 6*1.2em),
        linear-gradient(yellow,yellow) 0 0/1px max(0px,100% - 3*1.2em);
}

.quote-title {
    font-size: 30px;
    
}

.singup-section[contentedittable] {
    width:150px;
    border:1px solid;
    font-size:25px;
    line-height:1.2em;
    background:
        linear-gradient(red,red)       0 0/1px max(0px,100% - 6*1.2em),
        linear-gradient(yellow,yellow) 0 0/1px max(0px,100% - 3*1.2em);
}

.singup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: blanchedalmond;
    border: 12px solid lightblue;
    margin: 20px;
    padding: 40px;
    width: 80%;
}

.singup-title {
    padding-bottom: 12px;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.singup-text {
    font-size: 15px;
}

footer {
    margin-bottom: 0px;
    padding: 20px;
    text-align: center;
    color: black;
    background-color: rgb(230, 250, 250);
}