* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

math, mi, mo, mn, mtext {
  font-family: 'Inter', sans-serif !important;
  /* font-weight: 700; */
}


body {
    display: grid;
    grid-template-areas: 
    "header header header"
    ". main ."
    "footer footer footer";
    grid-template-columns: 1fr 700px 1fr;
    grid-template-rows: 1fr 420px 1fr;

    height: 100vh;
    font-family: 'Inter', sans-serif;
    /* font-weight: 700; */

    box-sizing: border-box;
    background-image: url("pictures/layer2.png");
    background-size:cover;
    background-position-x: center;
    background-position-y: center;
}


header {
    grid-area: header;
}

footer {
    grid-area: footer;
}

header {
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 10px;
}

main {
    grid-area: main;
    background-color: rgb(255, 255, 255);

    display: grid;
    grid-template-areas: 
    "collateral-rate-window interest-payment-window";
    grid-template-columns: 6fr 5fr;

    border: 1px solid rgb(190, 190, 190);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0.2, 0.2, 0.2, 0.2);
}

input {
    padding: 2px 0px;

    border-radius: 6px;

    border: 1px solid rgb(190, 190, 190);
}

.collateral-input-form {
    width: 70px;
    text-align: right;
}

select {
    padding: 2px 4px;
    text-align: center;

    border: 1px solid rgb(190, 190, 190);

    border-radius: 6px;
    background-color: white;
}

.collateral-rate-window {
    grid-area: collateral-rate-window;

    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    grid-template-areas: 
    "collateral-rate-title collateral-rate-title"
    "collateral-in-alph borrow-in-abd"
    "arrow1 arrow2"
    "collateral-in-usd borrow-in-usd"
    "arrow3 arrow4"
    "cr-formula cr-formula"
    "arrow5 arrow5"
    "cr-result cr-result"
    "liquidation-price liquidation-price"
    "alph-price alph-price";
    grid-template-rows: 60px 50px 18px 50px 14px 50px 24px 1fr 22px 36px;
    grid-template-columns: 164px 164px;
}

.arrow {
    color: rgb(190, 190, 190);

}
.collateral-rate-title {
    grid-area: collateral-rate-title;
}
.collateral-in-alph {
    grid-area: collateral-in-alph;
}
.borrow-in-abd {
    grid-area: borrow-in-abd;
}
.arrow1 {
    grid-area: arrow1;
}
.arrow2 {
    grid-area: arrow2;
}
.collateral-in-usd {
    grid-area: collateral-in-usd;
}
.borrow-in-usd {
    grid-area: borrow-in-usd;
}
.arrow3 {
    grid-area: arrow3;
    /* padding-left: 60px; */
}
.arrow4 {
    grid-area: arrow4;
    /* padding-right: 60px; */
}
.cr-formula {
    grid-area: cr-formula;
}
.arrow5 {
    grid-area: arrow5;
}
.cr-result {
    grid-area: cr-result;
    /* border-top: 2px solid black;
    border-bottom: 2px solid black; */
    border: 1px solid rgb(190, 190, 190);
    border-radius: 6px;
    width: max-content;
    padding: 6px 2px;
    overflow: hidden;

    width: 320px;
    height:80px;

    background-color: rgba(245, 245, 245, 0.6);
    transition: background-color 1s ease;
}
.liquidation-price {
    grid-area: liquidation-price;
    padding-bottom: 6px;
}
#liquidationPriceParagraph {
    transition: color 1s ease;
}
.conclusion {
    margin-top: 6px;
}
.alph-price {
    grid-area: alph-price;
}



.interest-payment-window {
    grid-area: interest-payment-window;
    border-left: 1px dashed black;
    padding: 0px 10px;

    display: grid;
    grid-template-rows: 60px 50px 82px 1fr;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.interest-payment-info {
    text-align: justify;
    padding: 0px 10px;
}


.interest-payment-calc {
    border: 1px solid rgb(190, 190, 190);
    border-radius: 6px;
    overflow: hidden;
}

table {
    text-align: end;
    width: 280px;

    padding: 3px 2px;

    background-color: rgb(255, 255, 255);

}

th, td {

    padding: 1px;
}

.table-name {
    border-bottom: 1px solid rgb(190, 190, 190);
    background-color: rgba(245, 245, 245, 0.6);
}

table .time {
    width: 60px;
    text-align: start;

}

table .ALPH {
    max-width: 110px;
    min-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table .USD {
    max-width: 110px;
    min-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

footer {
    text-align: center;
    font-size: 12px;
    color: rgb(75, 75, 75);
    padding: 8px 0px;
}



@media screen and (max-width: 740px) {
    body {
    display: grid;
    grid-template-areas: 
    "header header header"
    ". main ."
    "footer footer footer";
    grid-template-columns: 1fr 350px 1fr;
    grid-template-rows: 1fr 820px 60px;

    height: 100vh;
    font-family: 'Inter', sans-serif;

    box-sizing: border-box;
    background-image: url("pictures/layer2.png");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    }
    
    main {
        grid-template-areas: 
        "collateral-rate-window"
        "interest-payment-window";
        grid-template-columns: 1fr;
    }

    .collateral-rate-window {
    grid-area: collateral-rate-window;

    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    grid-template-areas: 
    "collateral-rate-title collateral-rate-title"
    "collateral-in-alph borrow-in-abd"
    "arrow1 arrow2"
    "collateral-in-usd borrow-in-usd"
    "arrow3 arrow4"
    "cr-formula cr-formula"
    "arrow5 arrow5"
    "cr-result cr-result"
    "liquidation-price liquidation-price"
    "alph-price alph-price";
    grid-template-rows: 60px 50px 18px 50px 14px 50px 24px 90px 28px 36px;
    grid-template-columns: 164px 164px;
    }

    .interest-payment-window {
    grid-area: interest-payment-window;
    border-top: 1px dashed black;
    border-left: none;
    padding: 0px 10px;

    display: grid;
    grid-template-rows: 56px 50px 72px 190px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    }
}